<template>
  <a-modal :open="visibleModal" title="编辑授权" width="600px" centered class="edit-modal-12" @cancel="handleCancel" @ok="onSubmit">
    <div class="modal-wrap h-229">
      <div class="title">
        {{ detailInfo?.serialNum }}_{{ detailInfo?.algoName }}_{{ detailInfo?.version }}_{{ detailInfo?.platform }}_{{
          detailInfo?.language
        }}
      </div>
      <a-spin :spinning="loading" tip="数据加载中">
        <a-form ref="formRef" :model="formState" layout="vertical" :colon="false" name="basic" class="form my-scrollbar" :rules="rules">
          <a-form-item :label="`可激活设备数（${detailInfo?.totalActivateNum}）`" name="addTotalCallNum" class="form-item">
            <a-input-number
              v-model:value.trim="formState.addTotalActivateNum"
              style="width: 100%"
              :min="0"
              :max="99999999"
              placeholder="请输入新增激活设备数"
              :precision="0"
              :formatter="transformNum"
              :parser="transformNum"
              @keydown.stop=""
            />
          </a-form-item>
        </a-form>
      </a-spin>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { FormInstance, message } from 'ant-design-vue'
  import { Rule } from 'ant-design-vue/lib/form'
  import { reactive, ref } from 'vue'

  import { authApi } from '@/services/api'

  import { AuthSdkDetail } from '../../types/serial-number'

  interface FormState {
    addTotalActivateNum: number | undefined
  }

  const emits = defineEmits(['on-success'])

  const visibleModal = ref(false)
  const loading = ref<boolean>(false)
  const detailId = ref<string>('')

  const formRef = ref<FormInstance>()
  const formState = reactive<FormState>({
    addTotalActivateNum: undefined
  })
  const rules: Record<string, Rule[]> = {
    time: [{ required: true, message: '请选择有效期', trigger: 'change' }]
  }

  const onSubmit = async () => {
    try {
      await formRef.value?.validate()
      const params = {
        id: detailId.value,
        ...formState
      }
      await authApi.updateSerialNumber(params)
      message.success('操作成功')
      emits('on-success')
      handleCancel()
    } catch (error) {
      console.log(error)
    }
  }

  const detailInfo = ref<AuthSdkDetail>()
  const getOnlineUpdateById = async (id: string) => {
    try {
      loading.value = true
      const { data } = await authApi.getSerialUpdateById(id)()
      detailInfo.value = data as AuthSdkDetail
      loading.value = false
      visibleModal.value = true
    } catch (error) {
      loading.value = false
    }
  }

  const openModal = (id: string) => {
    detailId.value = id
    getOnlineUpdateById(id)
  }

  const handleCancel = () => {
    detailId.value = ''
    formState.addTotalActivateNum = undefined
    visibleModal.value = false
  }
  const transformNum = (value: number | string): any => {
    let v = null
    switch (typeof value) {
      case 'string':
        v = isNaN(+value) ? 0 : value.replace(/\./g, '')
        break
      case 'number':
        v = isNaN(value) ? 0 : String(value).replace(/\./g, '')
        break
      default:
        v = 0
    }
    return v
  }
  defineExpose({
    openModal,
    handleCancel
  })
</script>

<style lang="less" scoped>
  @import '../../styles/common.less';
</style>
